<template>
  <view :style="colorStyle"> </view>
</template>

<script>
import {
  topicSave,
  putFileOSS,
  topicCategoryList,
  topicTagList,
  topicGoodsList,
  topicInfo,
  topicUpdate,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { loading, showModal, msg, back } from "@/utils/wxAPI";
import { getToken, setStorage } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      show: false,
      goodsShow: false,
      options: {},
      categoryList: [],
      categoryindex: null,
      content: "",
      goodsList: [],
      goods: [],
      img: [
        // 'https://file.slmy10000.com/20240723/47b5ab9163127d6fc4266993b8d6e14d.png',
        // 'https://file.slmy10000.com/20240723/5f057ec97695a36e5d67574d014e946d.jpg'
      ],
      isComment: 1,
      tagList: [],
      tag: [],
      title: "",
      video: "",
    };
  },
  async onLoad(options) {
    this.options = options;
    if (getToken()) {
      await this.topicCategoryList();
      await this.topicTagList();
      await this.topicGoodsList();
      if (options.id) {
        this.topicInfo();
      }
    }
  },
  methods: {
    async topicInfo() {
      loading();
      let { data } = await topicInfo({
        id: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        // console.log(data)
        let info = data.data;
        this.img = info.img.split(",");
        this.video = info.video;
        this.title = info.title;
        this.content = info.content;
        this.goods = info.goodsList;

        this.goodsList.map((item) => {
          info.goodsList.map((items, indexs) => {
            if (item.id == items.id) {
              item.check = true;
            }
          });
        });

        this.categoryList.map((item, index) => {
          if (item.id === info.categoryId) {
            this.categoryindex = index;
          }
        });
        let tag = [];
        this.tagList.map((item, index) => {
          info.tag.split(",").map((items, indexs) => {
            if (item.id == items) {
              item.check = true;
              tag.push(item);
            }
          });
        });
        this.tag = tag;
        // info.img = info.img.split(',');
        // info.tag = info.tag.split(',')
        // this.info = info;
      }
      uni.hideLoading();
    },
    async save() {
      if (this.img.length == 0) {
        return msg("至少上传1张图片");
      }
      if (!this.title) {
        return msg("请输入标题");
      }
      if (!this.content) {
        return msg("请输入内容");
      }
      if (this.categoryindex == null) {
        return msg("请选择分类");
      }
      if (this.tag.length == 0) {
        return msg("至少选择一个话题");
      }
      loading();
      let tag = [];
      this.tag.map((item) => {
        tag.push(item.id);
      });

      if (this.options.id) {
        let { data } = await topicUpdate({
          categoryId: this.categoryList[this.categoryindex].id,
          content: this.content,
          goodsList: this.goods,
          img: this.img.join(","),
          isComment: this.isComment,
          tag: tag.join(","),
          title: this.title,
          video: this.video,
          id: this.options.id ? this.options.id : "",
        });
        if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
          showModal({
            t2: "提交成功，请等待审核",
            btn1show: false,
          }).then(() => {
            back();
            setStorage("communityRef", 1);
          });
        }
        uni.hideLoading();
        return;
      }
      let { data } = await topicSave({
        categoryId: this.categoryList[this.categoryindex].id,
        content: this.content,
        goodsList: this.goods,
        img: this.img.join(","),
        isComment: this.isComment,
        tag: tag.join(","),
        title: this.title,
        video: this.video,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        showModal({
          t2: "提交成功，请等待审核",
          btn1show: false,
        }).then(() => {
          back();
          setStorage("communityRef", 1);
        });
      }
      uni.hideLoading();
    },
    async uploadImg() {
      uni.chooseImage({
        count: 9 - this.img.length,
        success: async (res) => {
          let tempFilePaths = res.tempFilePaths;
          loading();
          for (let i = 0; i < tempFilePaths.length; i++) {
            let { data } = await putFileOSS(tempFilePaths[i]);
            this.img.push(data.link);
            if (i == tempFilePaths.length - 1) {
              uni.hideLoading();
            }
          }
        },
      });
    },
    async uploadVideo() {
      uni.chooseVideo({
        success: async (res) => {
          let tempFilePath = res.tempFilePath;
          loading();
          let { data } = await putFileOSS(tempFilePath);
          this.video = data.link;
          uni.hideLoading();
        },
      });
    },
    closeImg(index) {
      this.img.splice(index, 1);
    },
    async topicCategoryList() {
      let { data } = await topicCategoryList({
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        this.categoryList = data.data;
      }
    },
    categoryListChange(e) {
      this.categoryindex = e.detail.value;
    },
    async topicTagList() {
      let { data } = await topicTagList({
        status: 1,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        data.data.map((item) => {
          item.check = false;
        });
        this.tagList = data.data;
      }
    },
    labelListChange(index) {
      this.tagList[index].check = !this.tagList[index].check;
    },
    tagChange() {
      let tag = [];
      this.tagList.map((item) => {
        item.check ? tag.push(item) : [];
      });
      if (tag.length > 5) {
        return msg("最多5个话题");
      }
      this.show = false;
      this.tag = tag;
    },
    async topicGoodsList() {
      let { data } = await topicGoodsList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        data.data.map((item) => {
          item.check = false;
        });
        this.goodsList = data.data;
      }
    },
    goodsChange(index) {
      this.goodsList[index].check = !this.goodsList[index].check;
    },
    goodsChangeOk() {
      let goods = [];
      this.goodsList.map((item) => {
        item.check ? goods.push(item) : [];
      });
      if (goods.length > 5) {
        return msg("最多添加5个商品");
      }
      this.goodsShow = false;
      this.goods = goods;
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #fff;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #fff;
}

.infobox1 {
  margin: 40rpx 30rpx 0;

  .block1 {
    margin: 0 28rpx 28rpx 0;
    position: relative;

    image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 28rpx;
    }

    video {
      width: 180rpx;
      height: 180rpx;
      border-radius: 28rpx;
    }

    .info1 {
      margin: 24rpx 0 0;
      text-align: center;
    }

    .close {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      right: 0;
      top: 0;
      background: rgba(255, 255, 255, 0.5);
    }

    .zhezhao {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      opacity: 0;
    }
  }
}

.infobox2 {
  margin: 30rpx 30rpx 0;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.infobox3 {
  padding: 32rpx 30rpx;
  border-bottom: 16rpx solid #f5f5f5;

  textarea {
    width: 100%;
  }
}

.infobox4 {
  margin: 0 30rpx 0;

  .block1 {
    border-bottom: 1px solid #f5f5f5;
    padding: 28rpx 0;
    position: relative;

    .info1 {
    }

    .info2 {
      margin: 28rpx 0 0;

      .tip1 {
        text {
          margin: 0 24rpx 0 0;
        }
      }

      .imglist {
        image {
          width: 68rpx;
          height: 68rpx;
          border-radius: 16rpx;
          margin: 0 12rpx 0 0;
        }
      }

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}

.infobox6 {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  z-index: 99;
  padding-top: 10rpx;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: 50rpx;
  /* #ifdef H5 */
  /* #endif */

  .block2 {
    width: 694rpx;

    .info1 {
      color: var(--view-theme);
      background: var(--view-op-ten);
      border-radius: 63rpx;
      padding: 20rpx 54rpx;
      margin: 0 0 0 30rpx;
    }

    .info2 {
      width: 100%;
      background: var(--view-theme);
      border-radius: 63rpx;
      padding: 20rpx 54rpx;
      // margin: 0 0 0 0;
      text-align: center;
    }
  }
}

.popbox1 {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;

  .close {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 30rpx;
    top: 40rpx;
  }

  .block1 {
    padding: 36rpx 0;
    text-align: center;
  }

  .block2 {
    margin: 50rpx 0rpx 0 30rpx;

    .label {
      border-radius: 18rpx;
      border: 2rpx solid #f5f5f5;
      padding: 17rpx 0rpx;
      display: inline-block;
      margin: 0 20rpx 20rpx 0;
      width: 210rpx;
      text-align: center;
    }

    .active {
      border: 2rpx solid var(--view-theme);
      background: var(--view-minorColorT);
    }
  }

  .block3 {
    // background: #F5F5F5;
    padding: 30rpx 30rpx 0;
    height: 55vh;
    overflow-y: scroll;
    // margin: 30rpx 0rpx 0 30rpx;

    .goodslist {
      margin: 0 0 40rpx 0;
      background: #fff;
      border-radius: 24rpx;

      // padding: 16rpx;
      .check {
        width: 60rpx;
      }

      image {
        min-width: 134rpx;
        width: 134rpx;
        height: 134rpx;
        border-radius: 24rpx;
      }

      .goodsinfo {
        margin-left: 24rpx;
        width: calc(100% - 24rpx - 134rpx - 60rpx);
        height: 134rpx;

        .info2 {
          .tip1 {
            position: relative;
            top: 2rpx;
          }
        }
      }
    }
  }

  .btn {
    background: var(--view-theme);
    border-radius: 44rpx;
    margin: 30rpx 75rpx 0;
    padding: 24rpx 0;
    text-align: center;
  }
}
</style>
